display: none;とtext-indent: -9999px;は何が違う？

display: noneとは何が違う？yosider.icontakker.icon

display:noneはその要素の存在を描画から抹消しますyuki_minoh.icon

ユーザーは一切のインタラクションができなくなり、描画ボックスもないものとして扱われます

JavaScriptを使えばアクセスできますが、ユーザーはクリックや選択などの一切の関与ができなくなります

DOMからは抹消されませんが、描画からは抹消される、ということです

このルールは、この記法の効果がかかったテキストを子供に持つ要素を指定しています

Scrapboxには、たとえば文字選択など、テキストとユーザーのインタラクションを仮定した機能があります

その描画ボックスを抹消してしまうと例えばテキストを選択したときなどにイベントが発生せず困るということです

代わりにtext-indentであれば、描画ボックスを残しつつ、本来の表示を隠すことも可能です

今回は、幅ゼロの描画ボックスを「描画」しています

表示だけ消したいならvisibility: hidden;が素直なのでは？nishio.icon

たしかにtakker.icon

リンクを出典アイコンにするUserCSSでいくつか試してみましたが、同等の効果を得られました

screen readerで読まれるかどうかくらい？

試しに/scrasobox/チェックボックスになるタグ 2の該当部分をdisplay: noneに変えて実行してみたが、違いがわからなかった…yosider.icon

まぁ:not(.cursor-line)で、カーソルを合わせると効果がなくなるように設定されているので、違いはなかなかわかりにくいだろうなぁと思いますｗyuki_minoh.icon

なるほどyosider.icon

カーソルを合わせると効果がなくなるように指定するのも、diplay:noneを使わないのも、設定者の安全策（ユーザーへの配慮）といえると思います

理解するための極端な例がほしいなら、width:100px;とか指定してみれば、インデントと抹消の違いが一目瞭然です

ですねyuki_minoh.icon